@extends('ClubLeader/default.app')

@section('title','CreateClubVideo')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <a class="create-return" href="{{ route('clubVideo.index') }}">
                    <span><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i></span>
                    <span>返回</span>
                </a>

                <div class="create">
                    <div class="create-title">添加俱乐部视频信息</div>
                    {!! Form::open(['route' => 'clubVideo.store', 'files' => true]) !!}
                    {{ csrf_field() }}
                    <div class="create-list{{ $errors->has('cvideo_name')?'':'' }}">
                        {!! Form::label('cvideo_name','俱乐部视频名称')!!}
                        {!! Form::text('cvideo_name',null)!!}
                        @if ($errors->has('cvideo_name'))
                            <span class="help-block">
                                <strong>{{ $errors->first('cvideo_name') }}</strong>
                            </span>
                        @endif
                    </div>
                    <div class="create-list">
                        {!! Form::label('cvideo_pic','俱乐部视频图片')!!}
                        <div>
                            {!! Form::file('cvideo_pic') !!}
                            @if ($errors->has('cvideo_pic'))
                                <div class="help-block">
                                    <strong>{{ $errors->first('cvideo_pic') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="create-list">
                        {!! Form::label('cvideo_address','俱乐部视频文件')!!}
                        <div>
                            <div>
                                <input type="file" id="aetherupload-file" onchange="AetherUpload.upload('file')"/>
                                <!--need to have an id "aetherupload-file" here for the file to be uploaded, 'file' is the default group name in config/aetherupload.php-->
                                <div class="progress "
                                     style="height: 6px;margin-bottom: 2px;margin-top: 10px;width: 200px;">
                                    <div id="aetherupload-progressbar"
                                         style="background:blue;height:6px;width:0;"></div>
                                    <!--need to have an id "aetherupload-progressbar" here for the progress bar-->
                                </div>
                                <span style="font-size:12px;color:#aaa;" id="aetherupload-output">等待上传</span>
                                <!--need to have an id "aetherupload-output" here for the prompt message-->
                            </div>
                            <input type="hidden" name="savedpath" id="aetherupload-savedpath" value="">
                            <!--need to have an id "aetherupload-savedpath"  and a name "savedpath" here for the saved path of the uploaded file-->
                            <div>
                                <p>原文件名：<span id="test1"></span></p>
                                <p>原文件大小：<span id="test2"></span></p>
                                <p>储存文件名：<span id="test3"></span></p>
                            </div>
                        </div>
                    </div>

                    <div class="create-btn">
                        {!! Form::reset('重置'); !!}
                        {!! Form::submit('添加'); !!}
                    </div>

                    {!! Form::close() !!}
                    <div id="debug"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ URL::asset('js/spark-md5.min.js') }}"></script><!--need to have spark-md5.js for md5 calculation-->
    <script src="{{ URL::asset('js/aetherupload.js') }}"></script><!--need to have aetherupload.js-->
    <script>
        // this function will be called after file is uploaded successfully
        // you can get fileName,fileSize,uploadExt,chunkCount,chunkSize,subDir,group,savedPath of the uploaded file
        AetherUpload.success = function () {
            // Example
            $('#test1').text(this.fileName);
            $('#test2').text(parseFloat(this.fileSize / (1000 * 1000)).toFixed(2) + 'MB');
            $('#test3').text(this.savedPath.substr(this.savedPath.lastIndexOf('/') + 1));
        };
    </script>
@endsection